<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
        ul{

            list-style: none;
        }
        li{

            margin-right: 50px;
        }
        .slideMenu{
            width: 200px;
            height: 200px;
            background-color: black;
            color: white;
            position: absolute;
            left: 100px;
            display: none;
        }
    </style>
</head>
<body>
<div class="Navigation">
    <ul style="display: flex">
        <li tabindex="1">1</li>
        <li >2</li>
        <li >3</li>
        <li >4</li>
        <li >5</li>
    </ul>
</div>
<div class="slideMenu">
    <ul>

    </ul>
</div>



<script type="text/javascript">
    $(function () {
        var list1=[{name:1,url:""},{name:1,url:""},{name:1,url:""},{name:1,url:""},{name:1,url:""},{name:1,url:""}]
        var list2=[{name:2,url:""},{name:2,url:""},{name:2,url:""},{name:2,url:""},{name:2,url:""},{name:2,url:""}]
        function xh(list){
            for(let i=0;i<list.length;i++){
                var li=$("<li>"+list[i].name+"</li>")
                $(".slideMenu ul").append(li)
            }
        }
    $(".Navigation li").each(function(i,el) {

       $(this).hover(function () {
           console.log(i)
           $(".slideMenu").slideDown(1000);

           switch (i) {
                case 0:xh(list1);
                console.log(i)
                   break;
               case 1:xh(list2);
                   console.log(i)
                   break;
               case 2:xh(list3);
                   console.log(i)
                   break;
               case 3:xh(list4);
                   console.log(i)
                   break;
               case 4:xh(list5);
                   break;
           }

       },function () {
           $(".slideMenu").slideUp(1000);

       })
    })
        let $canvas=$("<div>canvas</div>")

        $(".slideMenu").after($canvas)
        $canvas.css({
            "width":"100px",
            "height":"100px",
            "border":"1px solid red"
        })

    })

</script>
</body>
</html>